<script setup lang="ts">
import MySon from './MySon.vue'
import { ref } from 'vue'
const money = ref(100)
const str = ref('abc')

const options = [
  { label: '男孩', value: 1 },
  { label: '女哇', value: 0 }
]
const gender = ref<string | number>(0)

const times = [
  { label: '24小时', value: 1 },
  { label: '一天', value: 2 },
  { label: '一周', value: 3 },
  { label: '一月', value: 4 }
]
const defaultTime = ref(3)
</script>
<template>
  <div>
    健康百科
    <!-- <MySon :money="money" @changeMoney="money = $event"> </MySon> -->
    <!-- vue2在组件上使用v-model  子组件接收value属性 , 发布自定义事件是@input事件 -->
    <!-- <MySon :value="money" @input="money = $event"> </MySon> -->

    <!-- 在vue3中组件上使用v-model 子组件接收的属性 modelValue  发布自定义事件是update:modelValue事件-->
    <!-- vue3中整合了v-model和.sync修饰符 
         v-model="money"  等价于  v-model:modelValue="money"
         v-model:属性    update:属性
    -->
    <!-- <MySon v-model:money="money" v-model:str="str"></MySon> -->

    <cp-radio-btn :options="options" v-model="gender"></cp-radio-btn>
    <cp-radio-btn :options="times" v-model="defaultTime"></cp-radio-btn>
  </div>
</template>

<style scoped></style>
